HistoryMap.tsx ➔ HistoryMap - Code Metrics - Inspection of "Merge pull request #13 from FalkenDev/id-14" - FalkenDev/SparkRentals-Mobile-App - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — dev ( dc7ede...6b529c )

by Kasper

created 2023-01-11 12:05 UTC

HistoryMap.tsx ➔ HistoryMap D

↳ Parent: components/drawer/HistoryMap.tsx

Complexity

Conditions

Size

Total Lines	111
Code Lines	88

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	88
dl	0
loc	111
rs	4.1727
c	0
b	0
f	0
cc	11

How to fix Long Method Complexity

import { useState, useEffect } from 'react';
import { ScrollView, Image, Text, View, StyleSheet, StatusBar, Button, Pressable, Modal } from 'react-native';
import MapView, { Marker, Circle, Polygon } from 'react-native-maps';
import * as Location from 'expo-location';
import React from 'react';
import mapModel from '../../models/map';
import {API_KEY} from "@env";
import config from '../../config/config.json';
import Icon from 'react-native-vector-icons/Octicons';
import { start } from 'react-native-compass-heading';


export default function HistoryMap({navigation, journey, modalVisible, setModalVisible}): any {
    const [startCoordinates, setStartCoordinates] = useState([]);
    const [endCoordinates, setEndCoordinates] = useState([]);
    const [journeyData, setJourneyData] = useState([]);
    const [startStop, setStartStop] = useState([]);
    // console.log(journey);
    
    useEffect(() => {
        function setCoordinates() {
            if (modalVisible) {
                setStartCoordinates(journey['startPosition']);
                setEndCoordinates(journey['endPosition']);
                setJourneyData(journey);
                console.log(startCoordinates);

                console.log(endCoordinates);
                
            }
            
        };

        setCoordinates();
    })
    
    return (
        <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
            setModalVisible(!modalVisible)
        }}
        >
            <View style={styles.container}>
     
                <MapView
                    style={styles.map}
                    region={{
                        latitude: startCoordinates['latitude']? startCoordinates['latitude'] : 0,
                        longitude: startCoordinates['longitude']? startCoordinates['longitude'] : 0,
                        latitudeDelta: 0.05,
                        longitudeDelta: 0.05,
                    }}
                    userInterfaceStyle={'dark'}
                >

            {startCoordinates ? 
                <Marker 
                coordinate={{latitude: startCoordinates['latitude']? startCoordinates['latitude'] : 0,
                longitude: startCoordinates['longitude']? startCoordinates['longitude'] : 0
            }}
                />
                : 
                <View></View>
            }    

            {endCoordinates ? 
                <Marker 
                coordinate={{latitude: endCoordinates['latitude']? endCoordinates['latitude'] : 0,
                longitude: endCoordinates['longitude']? endCoordinates['longitude'] : 0
            }}
                />
                : 
                <View></View>
            }  


            

                

                </MapView>

                <View style={styles.infoContainer}>
                <Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => setModalVisible(false)}>
                    <Icon 
                        name='arrow-left' 
                        size={25} 
                        color='black'
                    />
                </Pressable>
                    <View style={styles.info}>

                        <View style={styles.listInfo}>
                            <Text style={styles.infoTitle}>Journey started</Text>
                            <Text>{journeyData['date']}</Text>
                        </View>

                        <View style={styles.listInfo}>
                            <Text style={styles.infoTitle}>Information about the trip</Text>
                            <Text>{mapModel.calcDistance(startCoordinates[0], startCoordinates[1], endCoordinates[0], endCoordinates[1])} km / {journeyData['totalMin']} min </Text>

                            <Text> {journeyData['totalPrice']} kr</Text>
                        </View>

                        <View style={styles.listInfo}>
                            <Text style={styles.infoTitle}>ID</Text>
                            <Text>{journeyData['_id']}</Text>
                        </View>

                        <View style={styles.listInfo}>
                            <Text style={styles.infoTitle}>Vehicle</Text>
                            <Text>{journeyData['scooterName']}</Text>
                        </View>

                    </View>
                </View>
            </View>
        </Modal>

    )
}

const styles = StyleSheet.create({
    container: {
        // position: 'absolute',
        // flex: 1,
        height: '100%',
        alignItems: "center",
        width: '100%',
        // backgroundColor: 'white'
    },

    map: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    
    shadowProp: {
        elevation: 5,
        shadowColor: 'black'
      },

    infoContainer: {
        height: '100%',
        // flex: 1,
        // backgroundColor: 'red',
        justifyContent: 'flex-end',
        width: '100%'
    },

    info: {
        height: '45%',
        width: '100%',
        backgroundColor: 'white',
        justifyContent: 'space-around',
        alignItems: 'center'
    },

    listInfo: {
        // backgroundColor: 'red',
        height: '20%',
        borderBottomWidth: 1,
        width: '90%',
        flexDirection: 'row',
        justifyContent: 'space-between'
        // marginBottom: 10
    },

    infoTitle: {
        fontWeight: '600',
    },

    backButton: {
        position: 'absolute',
        width: 40,
        height: 40, 
        left: 20,
        backgroundColor: 'white',
        top: 5,
        borderRadius: 25,
        borderWidth: 1,
        borderColor: 'gray',
        alignItems: 'center',
        justifyContent: 'center'
    },
});



1			import { useState, useEffect } from 'react';
2			import { ScrollView, Image, Text, View, StyleSheet, StatusBar, Button, Pressable, Modal } from 'react-native';
3			import MapView, { Marker, Circle, Polygon } from 'react-native-maps';
4			import * as Location from 'expo-location';
5			import React from 'react';
6			import mapModel from '../../models/map';
7			import {API_KEY} from "@env";
8			import config from '../../config/config.json';
9			import Icon from 'react-native-vector-icons/Octicons';
10			import { start } from 'react-native-compass-heading';
11
12
13			export default function HistoryMap({navigation, journey, modalVisible, setModalVisible}): any {
14			const [startCoordinates, setStartCoordinates] = useState([]);
15			const [endCoordinates, setEndCoordinates] = useState([]);
16			const [journeyData, setJourneyData] = useState([]);
17			const [startStop, setStartStop] = useState([]);
18			// console.log(journey);
19
20			useEffect(() => {
21			function setCoordinates() {
22			if (modalVisible) {
23			setStartCoordinates(journey['startPosition']);
24			setEndCoordinates(journey['endPosition']);
25			setJourneyData(journey);
26			console.log(startCoordinates);
27
28			console.log(endCoordinates);
29
30			}
31
32			};
33
34			setCoordinates();
35			})
36
37			return (
38			<Modal
39			animationType="slide"
40			transparent={true}
41			visible={modalVisible}
42			onRequestClose={() => {
43			setModalVisible(!modalVisible)
44			}}
45			>
46			<View style={styles.container}>
47
48			<MapView
49			style={styles.map}
50			region={{
51			latitude: startCoordinates['latitude']? startCoordinates['latitude'] : 0,
52			longitude: startCoordinates['longitude']? startCoordinates['longitude'] : 0,
53			latitudeDelta: 0.05,
54			longitudeDelta: 0.05,
55			}}
56			userInterfaceStyle={'dark'}
57			>
58
59			{startCoordinates ?
60			<Marker
61			coordinate={{latitude: startCoordinates['latitude']? startCoordinates['latitude'] : 0,
62			longitude: startCoordinates['longitude']? startCoordinates['longitude'] : 0
63			}}
64			/>
65			:
66			<View></View>
67			}
68
69			{endCoordinates ?
70			<Marker
71			coordinate={{latitude: endCoordinates['latitude']? endCoordinates['latitude'] : 0,
72			longitude: endCoordinates['longitude']? endCoordinates['longitude'] : 0
73			}}
74			/>
75			:
76			<View></View>
77			}
78
79
80
81
82
83
84			</MapView>
85
86			<View style={styles.infoContainer}>
87			<Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => setModalVisible(false)}>
88			<Icon
89			name='arrow-left'
90			size={25}
91			color='black'
92			/>
93			</Pressable>
94			<View style={styles.info}>
95
96			<View style={styles.listInfo}>
97			<Text style={styles.infoTitle}>Journey started</Text>
98			<Text>{journeyData['date']}</Text>
99			</View>
100
101			<View style={styles.listInfo}>
102			<Text style={styles.infoTitle}>Information about the trip</Text>
103			<Text>{mapModel.calcDistance(startCoordinates[0], startCoordinates[1], endCoordinates[0], endCoordinates[1])} km / {journeyData['totalMin']} min </Text>
104
105			<Text> {journeyData['totalPrice']} kr</Text>
106			</View>
107
108			<View style={styles.listInfo}>
109			<Text style={styles.infoTitle}>ID</Text>
110			<Text>{journeyData['_id']}</Text>
111			</View>
112
113			<View style={styles.listInfo}>
114			<Text style={styles.infoTitle}>Vehicle</Text>
115			<Text>{journeyData['scooterName']}</Text>
116			</View>
117
118			</View>
119			</View>
120			</View>
121			</Modal>
122
123			)
124			}
125
126			const styles = StyleSheet.create({
127			container: {
128			// position: 'absolute',
129			// flex: 1,
130			height: '100%',
131			alignItems: "center",
132			width: '100%',
133			// backgroundColor: 'white'
134			},
135
136			map: {
137			position: 'absolute',
138			top: 0,
139			left: 0,
140			bottom: 0,
141			right: 0,
142			},
143
144			shadowProp: {
145			elevation: 5,
146			shadowColor: 'black'
147			},
148
149			infoContainer: {
150			height: '100%',
151			// flex: 1,
152			// backgroundColor: 'red',
153			justifyContent: 'flex-end',
154			width: '100%'
155			},
156
157			info: {
158			height: '45%',
159			width: '100%',
160			backgroundColor: 'white',
161			justifyContent: 'space-around',
162			alignItems: 'center'
163			},
164
165			listInfo: {
166			// backgroundColor: 'red',
167			height: '20%',
168			borderBottomWidth: 1,
169			width: '90%',
170			flexDirection: 'row',
171			justifyContent: 'space-between'
172			// marginBottom: 10
173			},
174
175			infoTitle: {
176			fontWeight: '600',
177			},
178
179			backButton: {
180			position: 'absolute',
181			width: 40,
182			height: 40,
183			left: 20,
184			backgroundColor: 'white',
185			top: 5,
186			borderRadius: 25,
187			borderWidth: 1,
188			borderColor: 'gray',
189			alignItems: 'center',
190			justifyContent: 'center'
191			},
192			});
193
194

FalkenDev / SparkRentals-Mobile-App

Push — dev ( dc7ede...6b529c )

HistoryMap.tsx ➔ HistoryMap D

Complexity

Size

Duplication

Importance

How to fix Long Method Complexity

Long Method

Complexity

Duplication Side-by-Side

Filter issues like